<template>
  <!-- 加载数据 -->
  <a-modal
    :title="'加载数据'"
    :visible="loadVisible"
    :destroy-on-close="true"
    width="560px"
    height="400px"
    centered
    @cancel="handleCancel"
  >
    <div class="search-box-cont">
      <a-input
        v-model="searchKey"
        placeholder="输入搜索关键字..."
        allow-clear
      />
    </div>
    <div class="number-of-select">
      <span
        >已选{{ checkDataIds }}个文件,共{{
          searchMode ? searchDataList.length : allUserDataCount
        }}个文件</span
      >
      <a @click="toDataImport">导入数据</a>
    </div>
    <!--  body  -->
    <div class="description four-px-scroll-y">
      <div v-if="!searchMode">
        <a-tree v-model="checkIds" :tree-data="data" checkable> </a-tree>
      </div>
      <div v-if="searchMode">
        <a-tree v-model="checkIds" :tree-data="searchDataList" checkable>
        </a-tree>
      </div>
      <div
        v-if="
          (searchMode && searchDataList.length === 0) ||
          (!searchMode && data.length === 0)
        "
        class="no-result"
      >
        <img alt="" src="@/assets/view/category-empty.svg" />
        <div>暂无数据</div>
        <div>请到数据管理中导入数据</div>
      </div>
    </div>

    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        取消
      </a-button>
      <a-button
        key="submit"
        :loading="loading"
        type="primary"
        @click="handleOk"
      >
        确定
      </a-button>
    </template>
  </a-modal>
</template>

<script lang="ts">
/**
 * 图层管理-加载数据
 */
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import GisStore from '@/store/modules/gis'

@Component({
  components: {},
})
export default class LayerImportPopup extends Vue {
  // 项目id
  @Prop({ type: Number, default: 0 }) projectId!: number
  @Prop({ type: Number }) tabId!: number
  // modal 可见
  @Prop({ type: Boolean, default: false }) loadVisible!: boolean
  @Prop({ type: Array, default: () => [] }) data!: any[]

  public searchMode: boolean = false // 搜索模式
  public checkIds: number[] = [] // 已选择的数据 id
  public searchDataList: any[] = [] // 搜索模式搜索数据列表
  public searchKey: string = '' // 搜索关键字
  public loading: boolean = false

  public get checkDataIds() {
    return this.checkIds.length
  }

  public get allUserDataCount() {
    return this.data.length
  }

  @Watch('loadVisible')
  public onLoadVisible(value: boolean) {
    if (value) {
      this.checkIds = []
    }
  }

  @Watch('searchKey')
  public watchSearchKey(value: string) {
    const keyTrim: string = value.trim()
    if (keyTrim) {
      this.searchDataList = this.data.filter((data: any) =>
        data.title.toLowerCase().includes(keyTrim.toLowerCase())
      )
      this.searchMode = true
    } else {
      this.searchDataList = []
      this.searchMode = false
    }
  }

  public handleOk() {
    if (this.checkIds.length === 0) {
      this.$message.warning('请选择数据后确认!')
    } else {
      this.loadGisData(this.checkIds)
    }
  }

  public async loadGisData(ids: number[]) {
    const parameters: any = {
      projectId: this.projectId,
      tabId: this.tabId,
      datasetIds: ids,
    }
    this.loading = true
    try {
      const response: any = await GisStore.loadGisDataToLayerManagement(
        parameters
      )
      this.loading = false
      if (response.data.code === 100) {
        if (Array.isArray(response.data.result)) {
          this.$emit('confirm', response.data.result)
        } else {
          this.$emit('confirm', [response.data.result])
        }
      } else {
        this.$message.error('加载失败，请重新加载！')
      }
    } catch (error) {
      this.loading = false
      throw new Error(error)
    }
  }

  public handleCancel() {
    if (!this.loading) {
      this.$emit('cancel')
    }
  }

  /**
   * 跳转数据管理
   */
  public toDataImport() {
    if (!this.loading) {
      // 保存当前的url
      const parameters: any = {
        url: `/project/${this.$route.params.id}/gis`,
        projectId: this.$route.params.id,
        tabId: this.tabId,
        loadType: 'gis',
      }
      sessionStorage.setItem('lastUrl', JSON.stringify(parameters))
      const { href } = this.$router.resolve({
        path: '/management/data/import',
      })
      window.location.href = href
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/scroll-bar';

// 搜索
.search-box-cont {
  align-items: center;
  display: flex;
  height: 32px;
  margin-top: 12px;
  position: relative;
  width: 100%;
}

.number-of-select {
  align-items: center;
  color: #222432;
  display: flex;
  font-size: 12px;
  font-weight: 400;
  height: 32px;
  justify-content: space-between;
  letter-spacing: 1px;
  line-height: 17px;
  margin-top: 10px;
}

/deep/ .ant-tree-treenode-switcher-open,
/deep/ .ant-tree-treenode-switcher-close {
  position: relative;

  .ant-tree-checkbox {
    &::before {
      content: ' ';
      display: block;
      height: 32px;
      left: 0;
      position: absolute;
      top: 0;
      width: 120px;
    }
  }
}

.description {
  height: 200px;
  overflow-y: auto;
}

// 无搜索结果
.no-result {
  align-items: center;
  color: #888;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  padding: 9px 10px 0;
}
</style>
